<template>
	<view class="page-fill">
		<nodata v-show="hasvalue"></nodata>
		<view class="book-wrap">
			<view v-for="(item,index) in bookList" :key="index">
				<view class="book-item" @tap="gotobookdetail(item)">
					<!-- <image class="book-img" :src="item.bookImg"></image> -->
					<himg class="book-img" :src="item.bookImg" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
					<view class="book-info">
						<view class="book-title">{{item.title}}</view>
						<view class="book-desp">{{item.description}}</view>
						<view class="book-author">{{item.author}}</view>
					</view>
				</view>
				<view class="line-wrap"> <view class="line"></view> </view>
			</view> 
		</view>
		
		 <uni-fab
		            :pattern="pattern"
		            :content="content"
		            :horizontal="horizontal"
		            :vertical="vertical"
		            :direction="direction"
		            @trigger="trigger"
		        ></uni-fab>
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue';
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		components:{
			nodata,
			uniFab
		},
		data() {
			return {
				hasvalue:false,
				category:'',
				bookList:[],
				page:1,
				pagesize:20,
				totalpages:0,
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical', //水平vertical 垂直 horizontal
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#f37b1d',
					buttonColor: '#f37b1d'
				},
				content: [{
						iconPath: '/static/img/tabbar/category.png',
						selectedIconPath: '/static/img/tabbar/category_sel.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/img/tabbar/bookshelf.png',
						selectedIconPath: '/static/img/tabbar/bookshelf_sel.png',
						text: '书架',
						active: false
					}
				]
			}
		},
		onLoad(e) {
			var me = this;
			uni.setNavigationBarTitle({
				title:e.category
			});
			me.category = e.category;
			me.getbooklist(me.page,me.pagesize);
		},
		onReachBottom() {
			var me = this;
			if(me.page>me.totalpages)return;
			
			me.getbooklist(me.page,me.pagesize);
		},
		methods: {
			
			trigger(e) {
				//console.log(e)
				this.content[e.index].active = !e.item.active
				if(e.index == 0){
					uni.switchTab({
						url:'/pages/index/index'
					});
				}else{
					uni.switchTab({
						url:'/pages/bookshelf/bookshelf'
					});
				} 
			},
			gotobookdetail(f){
				uni.navigateTo({
					url:'../bookdetail/bookdetail?fictionid='+f.id+'&title='+f.title
				})
			},
			getbooklist(page,pagesize){
				var  me = this;
				var url = me.websiteUrl + 'getbooklist';
				var param ={
					category:me.category,
					page:page,
					pagesize:pagesize
				};
				me.webhttp(url,param,'POST').then(res=>{
				//	console.info(res);
					if(res.code == 200){
						me.totalpages = res.totalpages;
						me.page = page+1;
						me.bookList = me.bookList.concat(res.bookList) ;
						if(me.bookList.length==0){
							me.hasvalue = true;
						}
					}
				});
			},
		}
	}
</script>

<style>
@import url("categoryindex.css");
</style>
